<template>
  <div class="join-meeting">
    <BackButton :goBack="goBack" />

    <div class="title">
      加入会议
    </div>
    <div class="content">
      <div class="form">
        <span class="form_title">请输入会议号</span>
        <el-input v-model="meetingNumber" class="meeting-input" placeholder="请输入会议号" :prefix-icon="Plus" clearble />
        <el-button type="primary" class="join-button" :disabled="!meetingNumber" :loading="joinLoading"
          @click="handleJoin">
          {{ joinLoading ? '等待中...' : '进入会议' }}
        </el-button>

      </div>




      
    </div>
  </div>





</template>
<script setup lang="ts">

import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import socket from '../../../../utils/socket';
import { ElMessage, ElNotification } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';


const route = useRoute()
const router = useRouter()
const meetingNumber = ref('')
const joinLoading = ref(false);

const goBack = () => {
  window.history.back()
}
async function handleJoin() {
  if (!meetingNumber.value) {
    ElMessage.error('请输入会议号')
    return
  }
  router.push({
    path: '/meeting',
    query: {
      meetingId: meetingNumber.value
    }
  })
  // try {
  //   joinLoading.value = true;
  //   const meetingId = meetingNumber.value;
  //   // const t = $storage.get(TICKET);
  //   const token = localStorage.getItem('token');
  //   const name = 'aaaa'
  //   const avatar = 'http'
  //   const data = {
  //     meetingId,
  //     name,
  //     avatar,
  //     token,
  //   };
  //   // // 判断是否是当前会议的密钥
  //   // if (meetingId === t?.meetingId) {
  //   //   data.ticket = t?.ticket;
  //   // }

  //   await socket.open()
  //   await socket.send('JOIN', data);

  //   setTimeout(() => {
  //     joinLoading.value = false;
  //   }, 10 * 1000);
  // } catch (e) {
  //   joinLoading.value = false;
  //   ElMessage.error('您已断开连接，请刷新页面');
  // }
}
socket.addEventHandler('JOIN_RESOLVE', (result: any) => {
  ElNotification({
    title: '系统通知',
    message: '入会成功',
    type: 'success',
  })
  if (result.ticket) {

    if (typeof route.query.meetingId === 'string') {
      localStorage.setItem('ticket', JSON.stringify({
        meetingId: route.query.meetingId.replace(/-/g, ''),
        ticket: result.ticket,
      }));
    } else {
      // 处理 meetingId 不是字符串的情况
      console.error('meetingId 不是字符串');
    }

  }
  joinLoading.value = false;
  router.push({
    path: '/meeting',
    query: {
      meetingId: meetingNumber.value
    }
  })
})
socket.addEventHandler('JOIN_REJECT', function (result: any) {
  const { message } = result;
  ElNotification({
    title: '系统通知',
    message: message,
    type: 'error',
  })

  joinLoading.value = false;
});
</script>

<style scoped lang="scss">
.join-meeting {
  display: flex;
  flex-direction: column;
  min-height: 85vh;



  .title {
    font-size: 2.2rem;
    color: var(--el-text-color-primary);
    margin-bottom: 40px;
    font-weight: 500;
    text-align: center;
  }

  .content {
    flex: 1;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    padding-top: 10vh;

    .form_title {

      font-size: 1.5rem;
    }

    .form {

      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;

      .meeting-input {
        width: 30%;
        min-width: 300px;
        height: 2.5rem;

        :deep(.el-input-wrapper) {
          padding: 8px 15px;
        }

        :deep(.el-input_inner) {
          font-size: 16px;

        }
      }

      .join-button {
        width: 10%;
        padding: 12px 15px;
        font-size: 16px;
        height: 2.5rem;
      }



    }

  }

}
</style>
